<template>
  <div class="caseEntry">
    <div class="flex align-start">
      <div v-show="status!==3||type==='detail'" class="process">
        <el-steps direction="vertical" :active="status===1?1:status-1">
          <el-step v-if="status >= 0" description="公安机关填录">
            <div slot="title"><span class="name">张检</span><span class="time">2025-03-21 10:02:34</span></div>
          </el-step>
          <el-step v-if="status >= 1" description="侦协办填录">
            <div slot="title"><span class="name">李检</span><span class="time">2025-03-22 12:13:30</span></div>
          </el-step>
          <el-step v-if="status >= 3" description="案管部门初审">
            <div slot="title"><span class="name">赵检</span><span class="time">2025-03-23 09:36:13</span></div>
          </el-step>
          <el-step v-if="status >= 4" description="检察官审核填录">
            <div slot="title"><span class="name">周检</span><span class="time">2025-03-23 16:25:56</span></div>
          </el-step>
        </el-steps>
      </div>
      <div v-if="list.length && status===3&&type!=='detail'" class="process">
        <div class="title">案卡漏填、错填情况</div>
        <el-table v-if="type !== 'detail'" :data="list" class="plr-20 mt-10">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column align="left" prop="name" label="名称">
            <template slot-scope="scope">
              {{ scope.row.name }}{{ ['漏填', '错填'][+scope.row.type - 1] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-collapse v-model="activeName" accordion class="flex-1 ml-10">
        <el-collapse-item title="公安机关" name="1">
          <form1 ref="form1" :type="type" :show-flag="showFlag&&status=== 3" :status="status" />
        </el-collapse-item>
        <el-collapse-item v-if="type === 'detail'&&status > 1 || type !== 'detail'&&status >= 0" title="侦协办" name="2">
          <form2 ref="form2" :type="type" :status="status" />
        </el-collapse-item>
        <el-collapse-item v-if="type === 'detail'&&status > 3 || type !== 'detail'&& status >= 3" title="案管部门" name="3">
          <form3 ref="form3" :type="type" :status="status" />
        </el-collapse-item>
        <el-collapse-item v-if="type === 'detail'&&status > 4 || type !== 'detail'&&status >= 4" title="检察官" name="4">
          <form4 ref="form4" :type="type" :status="status" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import form1 from './component/form1.vue'
import form2 from './component/form2.vue'
import form3 from './component/form3.vue'
import form4 from './component/form4.vue'
export default {
  components: { form1, form2, form3, form4 },
  props: {
    showFlag: {
      type: Boolean,
      default: true
    },
    showStep: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      rules: {},
      type: 'add',
      activeName: '',
      rowData: {},
      list: this.$store.state.formBox.list,
      status: 0
    }
  },
  methods: {
    init(rowData, type) {
      this.type = type
      this.status = +rowData.status
      console.log(rowData.status)
      if (type === 'detail') {
        this.activeName = '1'
      } else {
        this.activeName = rowData.status.toString()
      }
      if (rowData) {
        this.$nextTick(() => {
          this.$refs.form1.form = rowData.gajgForm
          rowData.form1 && (this.$refs.form2.form = rowData.form1)
          rowData.form2 && (this.$refs.form3.form = rowData.form2)
          rowData.form3 && (this.$refs.form4.form = rowData.form3)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.caseEntry{
  height: calc(100% - 60px);
  overflow: auto;
}
  .title{
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background-color: #f2f2f2;
  }
  .process{
    width: 240px;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 14px;
    .name{
          color: #1890ff;
        }
        .time{
          color: #1890ff;
          font-size: 13px;
          margin-left: 10px;
        }

    ::v-deep{
      .el-step__line,.el-step__icon.is-text{
          border-color: #1890ff;
        }
      .el-step__description,.el-step__head{
        padding-bottom: 20px;
        color: #1890ff;
      }
      .el-step__title.is-finish{
        .name{
          color: #333;
        }
        .time{
          color: #999;
          font-size: 13px;
          margin-left: 10px;
        }
      }
      .el-step__description.is-finish,.el-step__head.is-finish{
        color: #999;
        .el-step__line,.el-step__icon.is-text{
          border-color: #999;
        }
      }
    }
  }
  ::v-deep{
    .el-collapse{
      padding: 10px;
      border-top: 0;
      .el-collapse-item{
        border: 1px solid #eee;
      }
      .el-collapse-item__content{
        padding-bottom: 0;
      }
      .el-collapse-item__header{
        font-weight: bold;
        height: 40px;
        line-height:40px;
        border-bottom: 1px solid #fff;
        padding-left: 10px;
        background-color: #eee;
      }
    }
    .el-collapse-item__header{
      background-color: transparent;
    }
  }
</style>

